/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from 'react';
import { useBoolean, useToggle } from 'ahooks';
import { If } from 'babel-plugin-jsx-control-statements';
import { Form, Input, Button, Upload, message, Select, Cascader, InputNumber, Radio, Checkbox, Table } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import Modal from '@/components/modal';
import Map from '@/components/map';
import BusinessType from '@/utils/BusinessType';
import RequestApi from '@/utils/request';
import css from '../index.scss';

const Business = () => {
	const columns = [
		{
			title: '序号',
			dataIndex: 'id',
			ellipsis: true,
			width: 80,
		},
		{
			title: '区域',
			dataIndex: 'districtName',
			ellipsis: true,
			width: 100,
		},
		{
			title: '文件名称',
			dataIndex: 'fileName',
			ellipsis: true,
			width: 300,
		},
		{
			title: '简称',
			dataIndex: 'desc',
			ellipsis: true,
			width: 150,
		},
		{
			title: '地址',
			dataIndex: 'filePath',
			ellipsis: true,
			render: (text) => {
				return <a href={text}>{text}</a>;
			},
		},
	];
	const [data, setData] = useState();
	const [state, { toggle }] = useToggle(true);
	// 控制请求数据只请求一次,至于为什么会一直请求数据我也不怎么清楚
	// 猜想是由于打开了这个Business函数组件，由于没有关闭，就会一直执行这个请求了
	if (state === true) {
		RequestApi.connection('get', '/importantBusinessCircle/getAll').then((response) => {
			toggle(false);
			setData({ ...response });
		});
	}
	return (
		<div>
			<If condition={data !== undefined}>
				<Table columns={columns} rowKey="id" dataSource={data.data.rows} pagination="false" />
			</If>
		</div>
	);
};

/**
 * 停车管理备案中新增备案中停车场设施-基本信息表单
 * -
 */
export default (props) => {
	const { result, parkLotBaseInfoFile, form } = props;
	const tips = '经度，范围为-180~180，负数表示西经；纬度，范围为-90~90，负数表示南纬，小数部分不超过6位';
	const { Option } = Select;
	const { TextArea } = Input;
	const [visible, { setTrue, setFalse }] = useBoolean(false);
	const [flag, { toggle }] = useToggle();
	// 停车设施基本信息的所在地址
	const [address, setAddress] = useState();
	useEffect(() => {
		RequestApi.connection('get', `district/getList`).then((response) => {
			const option = [];
			for (let i = 0; i < response.data.length; i += 1) {
				const child = [];
				for (let j = 0; j < response.data[i].sonArea.length; j += 1) {
					child.push({
						value: `${response.data[i].sonArea[j].id}:${response.data[i].sonArea[j].name}`,
						label: response.data[i].sonArea[j].name,
					});
				}
				option.push({
					value: `${response.data[i].id}:${response.data[i].name}`,
					label: response.data[i].name,
					children: child,
				});
			}
			setAddress(option);
		});
	}, []);
	const ownerType = 0;
	const ownerId = 0;
	// const host = 'http://192.168.43.11:8080';
	const host = 'http://192.168.21.86:8080';
	const parkLotList = {
		name: 'file',
		action: `${host}/oss/upload/${ownerType}/${ownerId}/${BusinessType.getParkLotList()}`,
		headers: {
			authorization: 'authorization-text',
		},
		onChange(info) {
			if (info.file.status === 'done') {
				message.success(`${info.file.name} file uploaded successfully`);
				form.setFieldsValue({
					parkLotList: [info.file.response.data.row.id],
				});
			} else if (info.file.status === 'error') {
				message.error(`${info.file.name} file upload failed.`);
			}
		},
	};
	const confirmationOfCompletion = {
		name: 'file',
		action: `${host}/oss/upload/${ownerType}/${ownerId}/${BusinessType.getConfirmationOfCompletion()}`,
		headers: {
			authorization: 'authorization-text',
		},
		onChange(info) {
			if (info.file.status === 'done') {
				message.success(`${info.file.name} file uploaded successfully`);
				form.setFieldsValue({
					confirmationOfCompletion: [info.file.response.data.row.id],
				});
			} else if (info.file.status === 'error') {
				message.error(`${info.file.name} file upload failed.`);
			}
		},
	};
	const chargePilesEvidentialMaterial = {
		name: 'file',
		action: `${host}/oss/upload/${ownerType}/${ownerId}/${BusinessType.getChargePilesEvidentialMaterial()}`,
		headers: {
			authorization: 'authorization-text',
		},
		onChange(info) {
			if (info.file.status === 'done') {
				message.success(`${info.file.name} file uploaded successfully`);
				form.setFieldsValue({
					chargePilesEvidentialMaterial: [info.file.response.data.row.id],
				});
			} else if (info.file.status === 'error') {
				message.error(`${info.file.name} file upload failed.`);
			}
		},
	};
	const planCountChange = (value) => {
		const values = form.getFieldsValue();
		if (values.parkLotRommType === 1) {
			// 停车库
			const count =
				value >= 1000 ? 1 : value < 1000 && value > 301 ? 2 : value < 300 && value > 51 ? 3 : value < 50 ? 4 : 0;
			form.setFieldsValue({
				parkLotScale: count,
			});
		}
		if (values.parkLotRommType === 2) {
			// 停车场
			const count =
				value >= 500 ? 1 : value < 500 && value > 301 ? 2 : value < 300 && value > 51 ? 3 : value < 50 ? 4 : 0;
			form.setFieldsValue({
				parkLotScale: count,
			});
		}
	};
	const countChange = () => {
		const values = form.getFieldsValue();
		const count =
			values.externalParkCount -
			values.noObstacleParkCount -
			values.chaegePileParkCount -
			values.microParkCount -
			values.dischargeParkCount -
			values.mechanicalParkCount;
		form.setFieldsValue({
			commonParkCount: count,
		});
	};
	// 通过两次子组件传递父组件，显示出地图经纬度
	function msg(v1, v2) {
		result(v1, v2);
	}
	return (
		<div>
			<Form.Item
				className={css.item}
				label="停车场名称"
				name="name"
				initialValue=""
				rules={[{ required: true, message: '停车场名称不能为空' }]}
			>
				<Input placeholder="请输入停车场名称" />
			</Form.Item>

			<Form.Item
				className={css.item}
				label="所在地区"
				name="districtName"
				initialValue=""
				rules={[{ required: true, message: '所在不能为空' }]}
			>
				<If condition={address !== null}>
					<Cascader options={address} />
				</If>
			</Form.Item>

			<Form.Item
				label="详细地址"
				className={css.item}
				name="address"
				initialValue=""
				rules={[{ required: true, message: '详细地址不能为空' }]}
			>
				<Input placeholder="请输入" />
			</Form.Item>

			<Form.Item label="入口经纬度" className={css.item} help={tips}>
				<Input.Group compact>
					<Form.Item name="entranceLongitude" noStyle id="longitude" initialValue={0}>
						<InputNumber min={-180} max={180} style={{ width: '30%' }} id="input" />
					</Form.Item>
					<Form.Item name="entranceLatitude" noStyle id="latitude" initialValue={0}>
						<InputNumber min={-90} max={90} style={{ width: '30%' }} />
					</Form.Item>
					<Button type="link" onClick={() => setTrue()}>
						地图标记
					</Button>
					<Modal title="地图标注" visible={visible} onOk={() => setFalse()} onCancel={() => setFalse()}>
						<Map msg={msg} isInput />
					</Modal>
				</Input.Group>
			</Form.Item>

			<Form.Item
				label="停车场申请等级"
				className={css.item}
				name="parkLevel"
				initialValue={0}
				rules={[{ required: true, message: '停车场申请等级不能为空' }]}
			>
				<Select placeholder="请选择">
					<Option value={0}>普通</Option>
					<Option value={1}>特级</Option>
				</Select>
			</Form.Item>

			<Form.Item className={css.item}>
				<></>
			</Form.Item>

			<Form.Item
				label="停车场类型"
				className={css.item}
				name="parkLotType"
				initialValue={1}
				rules={[{ required: true, message: '停车场类型不能为空' }]}
			>
				<Select placeholder="请选择">
					<Option value={1}>配建</Option>
					<Option value={2}>公共</Option>
				</Select>
			</Form.Item>

			<Form.Item
				label="室内外类型"
				className={css.item}
				name="parkLotRommType"
				initialValue={1}
				rules={[{ required: true, message: '室内外类型不能为空' }]}
			>
				<Select placeholder="请选择">
					<Option value={1}>室内</Option>
					<Option value={2}>室外</Option>
				</Select>
			</Form.Item>

			<Form.Item
				label="建设工程竣工规划核实确认书"
				className={css.item_file}
				name="confirmationOfCompletion"
				rules={[{ required: true, message: '建设工程竣工规划核实确认书不能为空' }]}
			>
				<Upload {...confirmationOfCompletion}>
					<Button icon={<UploadOutlined />}>选择文件</Button>
				</Upload>
				<If condition={parkLotBaseInfoFile !== undefined && parkLotBaseInfoFile.confirmationOfCompletion !== null}>
					{parkLotBaseInfoFile.confirmationOfCompletion.map((item) => (
						<a href={item.path}>{item.name}</a>
					))}
				</If>
			</Form.Item>

			<Form.Item
				label="用地性质"
				className={css.item}
				name="landUseNature"
				initialValue={1}
				rules={[{ required: true, message: '用地性质不能为空' }]}
			>
				<Select placeholder="请选择">
					<Option value={1}>机关单位</Option>
					<Option value={2}>小区</Option>
					<Option value={3}>企业</Option>
					<Option value={4}>公共</Option>
					<Option value={5}>个人</Option>
					<Option value={6}>租赁</Option>
					<Option value={7}>自用地</Option>
				</Select>
			</Form.Item>

			<Form.Item
				label="规划车位(个)"
				className={css.item}
				name="planParkCount"
				initialValue={0}
				rules={[{ required: true, message: '规划车位不能为空' }]}
			>
				<InputNumber min={0} style={{ width: '100%' }} onChange={planCountChange} />
			</Form.Item>

			<Form.Item
				label="停车库场建筑规模"
				className={css.item}
				name="parkLotScale"
				initialValue={4}
				rules={[{ required: true, message: '停车库场建筑规模不能为空' }]}
			>
				<Radio.Group disabled>
					<Radio value={1}>待大型</Radio>
					<Radio value={2}>大型</Radio>
					<Radio value={3}>中型</Radio>
					<Radio value={4}>小型</Radio>
				</Radio.Group>
			</Form.Item>

			<Form.Item
				label="已售车位数(个)"
				className={css.item}
				name="saleParkCount"
				initialValue={0}
				rules={[{ required: true, message: '已售车位数不能为空' }]}
			>
				<InputNumber min={0} style={{ width: '100%' }} />
			</Form.Item>

			<Form.Item
				label="对外经营车位数(个)"
				className={css.item}
				name="externalParkCount"
				initialValue={0}
				rules={[{ required: true, message: '对外经营车位数不能为空' }]}
			>
				<InputNumber min={0} style={{ width: '100%' }} onChange={countChange} />
			</Form.Item>

			<Form.Item
				label="分层填写(对外经营车位数)"
				className={css.item}
				initialValue=""
				name="externalParkCountDesc"
				rules={[{ required: true, message: '分层填写不能为空' }]}
			>
				<TextArea showCount placeholder="负二层：80个；负三层：83个" />
			</Form.Item>

			<Form.Item label="停车位清理" className={css.item_file} name="parkLotList">
				<Upload {...parkLotList}>
					<Button icon={<UploadOutlined />}>选择文件</Button>
				</Upload>
				<If condition={parkLotBaseInfoFile !== undefined && parkLotBaseInfoFile.parkLotList !== null}>
					{parkLotBaseInfoFile.parkLotList.map((item) => (
						<a href={item.path}>{item.name}</a>
					))}
				</If>
			</Form.Item>

			<Form.Item
				label="停车场面积单位(平方米)"
				className={css.item}
				name="parkArea"
				initialValue={0}
				rules={[{ required: true, message: '对外经营车位数不能为空' }]}
			>
				<InputNumber
					min={0}
					formatter={(value) => `${value}㎡`}
					parser={(value) => value.replace('㎡', '')}
					style={{ width: '100%' }}
				/>
			</Form.Item>

			<Form.Item
				label="分层填写(停车场面积)"
				className={css.item}
				initialValue=""
				name="parkAreaDesc"
				rules={[{ required: true, message: '分层填写不能为空' }]}
			>
				<TextArea showCount placeholder="负二层：5173.91㎡；负三层：5173.91㎡" />
			</Form.Item>

			<Form.Item
				label="无障碍停车位数(个)"
				className={css.item}
				name="noObstacleParkCount"
				initialValue={0}
				rules={[{ required: true, message: '无障碍停车位数不能为空' }]}
			>
				<InputNumber min={0} style={{ width: '100%' }} onChange={countChange} />
			</Form.Item>

			<Form.Item
				label="充电车位数(个)"
				className={css.item}
				name="chaegePileParkCount"
				initialValue={0}
				rules={[{ required: true, message: '充电车位数不能为空' }]}
			>
				<InputNumber min={0} style={{ width: '100%' }} onChange={countChange} />
			</Form.Item>

			<Form.Item
				label="充电车位证明材料"
				tooltip="请上传充电车位证明材料"
				className={css.item_file}
				name="chargePilesEvidentialMaterial"
			>
				<Upload {...chargePilesEvidentialMaterial}>
					<Button icon={<UploadOutlined />}>选择文件</Button>
				</Upload>
				<If condition={parkLotBaseInfoFile !== undefined && parkLotBaseInfoFile.chargePilesEvidentialMaterial !== null}>
					{parkLotBaseInfoFile.chargePilesEvidentialMaterial.map((item) => (
						<a href={item.path}>{item.name}</a>
					))}
				</If>
			</Form.Item>

			<Form.Item
				label="微型车位数(个)"
				className={css.item}
				name="microParkCount"
				initialValue={0}
				rules={[{ required: true, message: '微型车位数不能为空' }]}
			>
				<InputNumber min={0} style={{ width: '100%' }} onChange={countChange} />
			</Form.Item>

			<Form.Item
				label="卸货车位数(个)"
				className={css.item}
				name="dischargeParkCount"
				initialValue={0}
				rules={[{ required: true, message: '卸货车位数不能为空' }]}
			>
				<InputNumber min={0} style={{ width: '100%' }} onChange={countChange} />
			</Form.Item>

			<Form.Item
				label="机械式停车位数(个)"
				className={css.item}
				name="mechanicalParkCount"
				initialValue={0}
				rules={[{ required: true, message: '机械式车位数不能为空' }]}
			>
				<InputNumber min={0} style={{ width: '100%' }} onChange={countChange} />
			</Form.Item>

			<Form.Item
				label="普通停车位数(个)"
				className={css.item}
				name="commonParkCount"
				initialValue={0}
				tooltip="普通车位数=对外经营数-无障碍数-充电数-微型车数-卸货车数-机械车数"
				rules={[{ required: true, message: '普通停车位数不能为空' }]}
			>
				<InputNumber min={0} style={{ width: '100%' }} disabled />
			</Form.Item>

			<Form.Item
				label="出入口数量(个)"
				className={css.item}
				name="entranceExitScale"
				initialValue={0}
				tooltip="参考标准：
				特大型（停车位>1000个）出入口数量>=3个
				大型（301<停车位<1000个）出入口数量>=2个、中型及小型见右侧
				中型〔51<停车位<100）出入口数量>=1个、中型（101<停车位<300)出入口教量>=2个
				小型（25<停车位<50）出入口数量>=1个"
				rules={[{ required: true, message: '出入口数量不能为空' }]}
			>
				<InputNumber min={0} style={{ width: '100%' }} />
			</Form.Item>

			<Form.Item
				label="出入口车道数量(个)"
				className={css.item}
				name="entranceExitLaneScale"
				initialValue={0}
				tooltip="参考标准：
				非居住建筑出入口车道数量：		
				特大型（停车位>1000个）出入口车道数量>=5个	
				大型（301<停车位<500个）出入口车道数量>=3个、大型（501<停车位<1000个）出入口车道数量>=4个		
				中型〔51<停车位<300）出入口数量>=2个
				小型（25<停车位<50）出入口车道数量>=2个、小型（停车位<25）出入口车道数量>=1个
				居住建筑出入口车道数量：
				特大型（停车位>1000个）出入口车道数量>=3个
				大型（301<停车位<1000个）出入口车道数量>=2个				
				中型〔51<停车位<300）出入口数量>=2个				
				小型（25<停车位<50）出入口车道数量>=2个、小型（停车位<25）出入口车道数量>=1个"
				rules={[{ required: true, message: '出入口车道数量不能为空' }]}
			>
				<InputNumber min={0} style={{ width: '100%' }} />
			</Form.Item>

			<Form.Item
				label="位置属性"
				className={css.item}
				style={{ width: '100%' }}
				name="positionProperty"
				rules={[{ required: true, message: '出入口车道数量不能为空' }]}
			>
				<Checkbox.Group>
					<Checkbox value="江边">江边</Checkbox>
					<Checkbox value="景区">景区</Checkbox>
					<Checkbox value="宗教寺庙">宗教寺庙</Checkbox>
					<Checkbox value="重要商圈">重要商圈</Checkbox>
					<Checkbox value="医院">医院</Checkbox>
					<Checkbox value="学校">学校</Checkbox>
					<Checkbox value="大型市场">大型市场</Checkbox>
					<Checkbox value="均不是">均不是</Checkbox>
				</Checkbox.Group>
			</Form.Item>
			<Button type="link" onClick={() => toggle()}>
				查看重要商圈
			</Button>
			<Modal title="查看重要商圈" visible={flag} onOk={() => toggle(false)} onCancel={() => toggle(false)}>
				<Business />
			</Modal>
		</div>
	);
};
